<template>
  <div class="mine container">
    <div class="mine-head" @click="bindWechat">
      <div class="user-head">
        <img :src="userInfo && userInfo.headUrl ? userInfo.headUrl : defaultHead" />
      </div>
      <div class="login-txt">
        <div class="bigger">{{userInfo && userInfo.promoterName?userInfo.promoterName : '推广员'}}</div>
        <div class="smaller">{{userInfo && userInfo.telephone?userInfo.telephone : '快来登录，看看你赚了多少'}}</div>
      </div>
    </div>

    <Money />
    
    <div class="mine-bottom">
      <div class="bottom-item" v-for="item in funList" @click="item.fun">
        <div class="bottom-item-left">
            <img :src="item.icon" />
            <div>{{ item.name }}</div>
        </div>
        <img :src="arrow"
      </div>
    </div>
  </div>
</template>
<script lang="ts">
// @ts-nocheck
import { ref, watch } from "vue";
import { requireImg } from "@/assets/imgUrl";
import { showConfirmDialog } from 'vant';
import { unBindWechatUser } from "@/api/common"
import Money from '@/components/Money.vue'
import { useRouter } from "vue-router";
//在setup中
export default {
  name: "App",
  setup() {
    const active = ref(0);
    const isLoading = true;
    const arrow = requireImg('personal-center/arrow.png');
    const defaultHead = requireImg('personal-center/head.png');
    const userInfo = window.userInfo && window.userInfo.userInfo;
    const router = useRouter()

    const funList = [{
      icon: requireImg('personal-center/logout.png'),
      name: '登出',
      fun: ()=> {
        showConfirmDialog({
          title: '登出',
          message: '确认登出？',
        }).then(() => {
          // on close
          unBindWechatUser({
            openid: window.openId
          }).then(res => {
            window.userInfo = null;
            window.location.reload()
          })
        });
      }
    },{
      icon: requireImg('personal-center/about.png'),
      name: '关于我们',
      fun: ()=> {
        router.push({ path: 'about' })
      }
    }];

    return {
      active,
      funList,
      isLoading,
      arrow,
      userInfo,
      defaultHead,
      router
    };
  },
  components: {
    Money
  },
  mounted() {
      console.log('this.icon', this.funList)
  },
  methods: {
    bindWechat() {
      if(this.userInfo) {
        console.log('openid == ', window.openId)
      }else {
        this.router.push({ path: 'login' })
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.mine {
  .mine-head {
    padding-top: 20px;
    display: flex;

    .user-head {
      img {
        width: 52px;
        height: 52px;
      }
    }

    .login-txt {
      margin-left: 20px;
      color: #262626;

      .bigger {
        font-size: 16px;
        font-weight: bold;
      }

      .smaller {
        font-size: 12px;
      }
    }
  }

  .mine-bottom {
    background: #FFFFFF;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.08), 0px -2px 8px -2px rgba(0,0,0,0.05);
    border-radius: 12px;
    margin-top: 10px;

    .bottom-item {
      display: flex;
      align-items: center;
      height: 40px;
      justify-content: space-between;
      padding: 10px;
      .bottom-item-left {
        display: flex;
        align-items: center;
        img {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>